<template>
    <div class="card card_chart">
        <!-- 设备标题 -->
        <h4 class="normal card_map_title">
            <svg class="icon card_icon" aria-hidden="true">
                <use xlink:href="#icon-shujuquxianzoushiqushitubiaoshangshengxianxing"></use>
            </svg>
            <router-link to="/Overview/xtg403">
            <span v-show="this.showShi == 1">湿度曲线</span>
            <span v-show="this.showWen == 1">温度曲线</span>
            </router-link>
        </h4>
        <div class="chart">
            <!-- <div class="line lineZ" @click="showqx(2)"><h6>全部</h6></div> -->
            <div class="lineY" @click="showy()"><h6>
                <i class="el-icon-caret-bottom" v-if="this.yOpen == true"></i>        
                <i class="el-icon-caret-top" v-if="this.yOpen == false"></i>     
            </h6></div>
            <div class="line lineW" @click="showqx(0)"><h6>温度</h6></div>
            <div class="line lineS" @click="showqx(1)"><h6>湿度</h6></div>
            
            <div class="chart_detail" ref="chart0" :style="this.showWen == 1 ? 'top: 0;':'top: -300px;'" />
            <!-- <div class="chart_detail"   ref="chart"/> -->
            <div class="chart_detail"  ref="chart1" :style="this.showShi == 1 ? 'top: -210px;':'top: 100px;'" />
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data () {
        return {
            chart0: null,
            chart1: null,
            timer: null,
            tempListInside: [],
            wen:0,
            shi:0,
            wenMax:0,
            wenMin:0,
            con:0,
            time:'',
            histWen:[],
            histShi:[],
            tempCurve:[],
            run:true,
            yTime:[],
            showWen:0,
            showShi:1,
            yOpen:false,
        }
    },
    mounted() {
        this.$once('hook:beforeDestroy' , ()=>{
            this.run = false
        })
        // this.getTemp();
    },
    methods: {
        showqx(val){
            //温度
            if(val == 0){
                this.showWen = 1
                this.showShi = 0
                this.initChart0() 
            }else if(val == 1){
                this.showWen = 0
                this.showShi = 1
                this.initChart1()
            }
            // else if(val == 2){
            //     this.showShi = 1
            //     this.showWen = 1
            // }
            
            
        },
        getTemp() {
            if(localStorage.getItem("tempCurve") == null){
                var tempCurve = {'wen':[],'shi':[],'yTime':[]}
                tempCurve['wen'] = new Array(480).fill(0);//温度数组
                tempCurve['shi'] = new Array(480).fill(0);//湿度数组
                tempCurve['yTime'] = new Array(480).fill('0');//y轴时间数组
            }else{
                var tempCurve = JSON.parse(localStorage.getItem("tempCurve"));
                // tempCurve['wen'] = new Array(480).fill(17);//温度数组假数据
                // tempCurve['shi'] = new Array(480).fill(45);//湿度数组假数据
                
            }
            // localStorage.setItem("cardList", JSON.stringify(this.cardList));
            this.histWen = tempCurve['wen']
                this.histShi = tempCurve['shi']
                this.yTime = tempCurve['yTime']
                this.initChart0();
                this.initChart1()
            if(this.run){
                    setTimeout(this.getTemp ,this.$store.state.tempTime )
            }
        },
        showy(){
            this.yOpen = !this.yOpen
            this.initChart0();
            this.initChart1()
        },
        // 折线图
        initChart0() {
            if (this.chart0 == null) {
                this.chart0 = echarts.init(this.$refs.chart0);
            }
      
            // this.chart0 = echarts.init(this.$refs.chart0);
            // 绘制图表，this.echarts1_option是数据
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show:false,
                    data: ['温度']
                },
                grid: {
                    //统计图距离边缘的距离
                    top: "8%",
                    left: "5%",
                    right: "5%",
                    bottom: "10%"
                },
                // dataZoom: [
                //     {
                //         show: false,//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
                //         start: 0,
                //         end: 100
                //     }
                // ],	
                dataZoom: [
                    {
                        // type: 'inside', //无滑动条内置缩放   
                        type: 'slider', //缩放滑动条
                        show: this.yOpen, //开启
                        yAxisIndex: [0], //Y轴滑动
                        //  xAxisIndex: [0],//X轴滑动
                        start: 0, //初始化时，滑动条宽度开始标度
                        end: 100, //初始化时，滑动条宽度结束标度
                        // startValue: 0,
                        // endValue: 30,
                        fillerColor: 'rgba(243,147,73,0.2)', //滑块的颜色
                        // backgroundColor: 'transparent',  // 滑块轨道的颜色
                        borderColor: 'rgba(243,147,73,0.2)', // 滑块轨道边框的颜色
                        width: 20,   // 滑块高度
                        handleStyle:{ /*手柄的样式*/ 
                            color:"rgba(243,147,73,0.2)", 
                            borderColor:"rgba(243,147,73,0.6)"
                        },
                        textStyle: {
                            color: "#fff" //滚动条两边字体样式
                        }
                    }
                ],
                xAxis: [
                    {
                    //x轴
                    type: "category", //数据类型为不连续数据
                    boundaryGap: false, //坐标轴两边是否留白
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                        color: "#233e64" //x轴颜色
                        },
                        //boundaryGap: true
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置
                        textStyle: {
                        color: "#6a9cd5"
                        },
                        // interval:40,//x轴坐标间距，30分钟一格
                        interval:this.yTime.length/3,//x轴坐标间距，分20格
                        showMaxLabel: true,//关键部分，显示最后一个label
                    },
                    axisTick: { show: true }, //刻度点数轴
                    data: this.yTime
                    }
                ],
                yAxis: [
                    {
                    //y轴的相关设置
                    type: "value", //y轴数据类型为连续的数据
                    // min:"dataMin",//y轴上的刻度最小值
                    // max:"dataMax",//y轴上的刻度最大值
                    min:0,//y轴上的刻度最小值
                    max:100,//y轴上的刻度最大值

                    splitNumber: 5, //y轴上的刻度段数
                    splitLine: {
                        //y轴上的y轴线条相关设置
                        show: true,
                        lineStyle: {
                        color: "#233e64"
                        },
                    },
                    axisLine: {
                        //y轴的相关设置
                        show: true,
                        lineStyle: {
                        color: "#233e64" //y轴颜色
                        }
                    },
                    axisLabel: {
                        //y轴的标签相关设置
                        textStyle: {
                        color: "#6a9cd5"
                        },
                    },
                    axisTick: { show: true }, //刻度点数轴
                    boundaryGap: [0.2, 0.2]

                    }
                ],
                series: [
                    {
                    name: "温度",
                    type: "line", //统计图类型为折线图
                    smooth: true, //是否平滑曲线显示
                    symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
                    lineStyle: {
                        //线条的相关设置
                        normal: {
                        color: "#f39349" // 线条颜色
                        }
                    },
                    areaStyle: {
                        //区域填充样式
                        normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                            { offset: 0, color: "rgba(243,147,73, 0)" },
                            { offset: 0.7, color: "rgba(243,147,73, 0)" }
                            ],
                            false
                        ),

                        shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    markArea: {
                        itemStyle : { //全局的
                            normal : {
                                color : 'rgba(243,147,73,0.2)'
                            }
                        },
                        data : [ [ {
                            yAxis : parseInt(15),//y轴坐标控制
                            itemStyle : {
                                color : 'rgba(243,147,73,0.2)'
                            },
                        }, {
                            yAxis : parseInt(25),//y轴坐标控制
                            itemStyle : {
                                color : 'rgba(243,147,73,0.2)'
                            }
                        } ] ]
                    },
                    data:this.histWen 
                    }
                ]
            }
            option.yAxis[0].max = 35
            option.yAxis[0].min = 5
            option.yAxis[0].splitNumber = 5
            option.series[0].areaStyle ={
                    //区域填充样式
                    normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                        { offset: 0, color: "rgba(243,147,73, 0)" },
                        { offset: 0.7, color: "rgba(243,147,73, 0)" }
                        ],
                        false
                    ),

                    shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                }
            option.series[0].markArea = {
                    itemStyle : { //全局的
                        normal : {
                            color : 'rgba(243,147,73,0.2)'
                        }
                    },
                    data : [ [ {
                        yAxis : parseInt(15),//y轴坐标控制
                        itemStyle : {
                            color : 'rgba(243,147,73,0.2)'
                        }
                    }, {
                        yAxis : parseInt(25),//y轴坐标控制
                        itemStyle : {
                            color : 'rgba(243,147,73,0.2)'
                        }
                    } ] ]
                }
            var datazoom = JSON.parse(localStorage.getItem("dataZoomValueWen"));
            if(datazoom == null){
                option.dataZoom[0].start = 100;
                option.dataZoom[0].end = 0;
            }else{
                option.dataZoom[0].start = datazoom[0].wenStart;
                option.dataZoom[0].end = datazoom[0].wenEnd
            }
            this.chart0.setOption(option);
            this.chart0.on('dataZoom', function(e) {
                var dataZoomValue = [
                    {
                        wenStart: JSON.stringify(e.start),
                        wenEnd: JSON.stringify(e.end),
                    }
                ]
                localStorage.setItem("dataZoomValueWen", JSON.stringify(dataZoomValue));
                
            });
        },
        // 折线图
        initChart1() {
            if (this.chart1 == null) {
                this.chart1 = echarts.init(this.$refs.chart1);
            }
      
            // this.chart1 = echarts.init(this.$refs.chart1);
            // 绘制图表，this.echarts1_option是数据
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show:false,
                    data: ['湿度']
                },
                grid: {
                    //统计图距离边缘的距离
                    top: "8%",
                    left: "5%",
                    right: "5%",
                    bottom: "10%"
                },
                // dataZoom: [
                //     {
                //         show: false,//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
                //         start: 0,
                //         end: 100
                //     }
                // ],	
                dataZoom: [
                    {
                        // type: 'inside', //无滑动条内置缩放   
                        type: 'slider', //缩放滑动条
                        show: this.yOpen, //开启
                        yAxisIndex: [0], //Y轴滑动
                        //  xAxisIndex: [0],//X轴滑动
                        start: 0, //初始化时，滑动条宽度开始标度
                        end: 100, //初始化时，滑动条宽度结束标度
                        // startValue: 0,
                        // endValue: 30,
                        fillerColor: 'rgba(61,234,255,0.2)', //滑块的颜色
                        // backgroundColor: 'transparent',  // 滑块轨道的颜色
                        borderColor: 'rgba(61,234,255,0.2)', // 滑块轨道边框的颜色
                        width: 20,   // 滑块高度
                        handleStyle:{ /*手柄的样式*/ 
                            color:"rgba(61,234,255,0.2)", 
                            borderColor:"rgba(61,234,255,0.6)"
                        },
                        textStyle: {
                            color: "#fff" //滚动条两边字体样式
                        }
                    }
                ],
                xAxis: [
                    {
                    //x轴
                    type: "category", //数据类型为不连续数据
                    boundaryGap: false, //坐标轴两边是否留白
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                        color: "#233e64" //x轴颜色
                        },
                        //boundaryGap: true
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置
                        textStyle: {
                        color: "#6a9cd5"
                        },
                        // interval:40,//x轴坐标间距，30分钟一格
                        interval:this.yTime.length/3,//x轴坐标间距，分20格
                        showMaxLabel: true,//关键部分，显示最后一个label
                    },
                    axisTick: { show: true }, //刻度点数轴
                    data: this.yTime
                    }
                ],
                yAxis: [
                    {
                    //y轴的相关设置
                    type: "value", //y轴数据类型为连续的数据
                    // min:"dataMin",//y轴上的刻度最小值
                    // max:"dataMax",//y轴上的刻度最大值
                    min:0,//y轴上的刻度最小值
                    max:100,//y轴上的刻度最大值

                    splitNumber: 5, //y轴上的刻度段数
                    splitLine: {
                        //y轴上的y轴线条相关设置
                        show: true,
                        lineStyle: {
                        color: "#233e64"
                        },
                    },
                    axisLine: {
                        //y轴的相关设置
                        show: true,
                        lineStyle: {
                        color: "#233e64" //y轴颜色
                        }
                    },
                    axisLabel: {
                        //y轴的标签相关设置
                        textStyle: {
                        color: "#6a9cd5"
                        },
                    },
                    axisTick: { show: true }, //刻度点数轴
                    boundaryGap: [0.2, 0.2]

                    }
                ],
                series: [
                    {
                    name: "湿度",
                    type: "line", //统计图类型为折线图
                    smooth: true, //是否平滑曲线显示
                    symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
                    lineStyle: {
                        //线条的相关设置
                        normal: {
                        color: "#3deaff" // 线条颜色
                        }
                    },
                    grid:{
                        bottom: "70px"
                        },
                    areaStyle: {
                        //区域填充样式
                        normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                            { offset: 0, color: "rgba(61,234,255, 0)" },
                            { offset: 0.7, color: "rgba(61,234,255, 0)" }
                            ],
                            false
                        ),
                        shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    markArea: {
                        itemStyle : { //全局的
                            normal : {
                                color : 'rgba(61,234,255,0.2)'
                            }
                        },
                        data : [ [ {
                            yAxis : parseInt(40),//y轴坐标控制
                            itemStyle : {
                                color : 'rgba(61,234,255,0.2)'
                            }
                        }, {
                            yAxis : parseInt(60),//y轴坐标控制
                            itemStyle : {
                                color : 'rgba(61,234,255,0.2)'
                            }
                        } ] ]
                    },
                    data: this.histShi
                    },
                ]
            }
            option.yAxis[0].max = 80
            option.yAxis[0].min = 20
            option.series[0].areaStyle ={
                    //区域填充样式
                    normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                        { offset: 0, color: "rgba(61,234,255, 0)" },
                        { offset: 0.7, color: "rgba(61,234,255, 0)" }
                        ],
                        false
                    ),

                    shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                }
            option.series[0].markArea = {
                    itemStyle : { //全局的
                        normal : {
                            color : 'rgba(61,234,255,0.5)'
                        }
                    },
                    data : [ [ {
                        yAxis : parseInt(40),//y轴坐标控制
                        itemStyle : {
                            color : 'rgba(61,234,255,0.2)'
                        }
                    }, {
                        yAxis : parseInt(60),//y轴坐标控制
                        itemStyle : {
                            color : 'rgba(61,234,255,0.2)'
                        }
                    } ] ]
                }
            
            // console.log(JSON.parse(localStorage.getItem("dataZoomValue")))
            
            var datazoom = JSON.parse(localStorage.getItem("dataZoomValueShi"));
            if(datazoom == null){
                option.dataZoom[0].start = 100;
                option.dataZoom[0].end = 0
            }else{
                option.dataZoom[0].start = datazoom[0].shiStart;
                option.dataZoom[0].end = datazoom[0].shiEnd
            }
            
            this.chart1.setOption(option);
            this.chart1.on('dataZoom', function(e) {
                var dataZoomValue = [
                    {
                        shiStart: JSON.stringify(e.start),
                        shiEnd: JSON.stringify(e.end),
                    }
                ]
                localStorage.setItem("dataZoomValueShi", JSON.stringify(dataZoomValue));
                
            });
        },
    }
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
    .card_chart{
        height: 220px;
    }
    .chart_detail {
        height: 210px;
        position: relative;
    }
    .line{
        width: 60px;
        height: 20px;
        z-index: 10;
        top: 22px;
        position: absolute;
        cursor: pointer;
    }
    .lineZ{
        background: #ffffff;
        right: 320px;
    }
    .lineW{
        background: #f39349;
        right: 80px;
    }
    .lineY{
        width: 30px;
        height: 20px;
        z-index: 10;
        top: 22px;
        position: absolute;
        cursor: pointer;
        text-align: center;
        font-size: 25px;
        line-height: 19px;
        right: 3px;
    }
    .lineS{
        background: #3deaff;
        right: 200px;
    }
    .line h6{
        position: absolute;
        font-size: 12px;
        line-height: 20px;
        right: -48px;
        width: 40px;
    }
</style>